<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui.css" media="all">
  <link rel="stylesheet" href="../MDASS.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body style="overflow-y: scroll;">  

<div style="margin-bottom: 5px;">          
 
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
</div>
<!-- 功能按键 -->

<div class="layui-col-md9">
  <button id="searchNew" data-method="search" class="layui-btn" style="float: right;margin-left: 10px">搜索</button>    
  <input name="course_search" id="course_search" class="layui-input" type="text" style="float: right;width: 200px" >
</div>


<div class="courseButton">
    <button id="addCourse" data-method="setTop" class="layui-btn" style="float: left;margin-left: 10px">新建</button>
    <button type="button" class="layui-btn" id="uploadFile">
      <i class="layui-icon">&#xe67c;</i>上传文件
    </button>
</div>




<div class = "courseTable">
  <table class="layui-table" id = "coursesData" lay-filter="demo" lay-data="{id: 'coursesData'}"></table>  
</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>              
          
<script src="../layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script src="../jquery-3.1.1.min.js"></script>
<script>
var courseDatas;
$.ajax({ 
  url: "/admin/course/listCourse",
  contentType: "application/x-www-form-urlencoded",
  data:{
  },
  type:"get",
  dataType : "json",
  success: function(data){
    courseDatas = data;
/*       console.log(data);*/
    }
  });
  layui.use(['table','layer','upload'], function(){
  var table = layui.table;
  table.render({
    id:"coursesData",
    elem: '#coursesData',
    done: function(res, curr, count){
        //如果是异步请求数据方式，res即为你接口返回的信息。
        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
/*      console.log(res);*/
    },
    cols:[[//标题栏
    {field:'id', width:150,title:'编号'},
    {field:'courseSerial',width:150,title:'课程编码',sort:true},
    {field:'courseName',title:'课程名称',edit:'text'},
    {field:'tname',width:150,title:'授课教师',edit:'text'},
    {field:'classTrem',title:'上课学期'},
    {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
    ]],
    data:courseDatas,
    skin:'line',
    even: true,
    page:true,
    limits:[5,10,15],
    limit:5,//limit:5 每页显示的数量
  })
/*
 * 编辑表格信息
 */
   table.on('edit(demo)',function(obj){
   var value = obj.value,
   field = obj.field;
   data = obj.data;
   layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
   console.log(data.id+","+data.tname+","+data.classTrem+","+data.courseSerial+","+data.courseName);
   updataCourse(data.id,data.tname,data.classTrem,data.courseSerial,data.courseName);
   });
  
  function updataCourse(id,tname,classTrem,courseSerial,courseName){
    $.ajax({
      url:"/admin/course/updata",
      type:"post",
      dataType:"json",
      data:{
        "id":id,
        "tName":tname,
        "courseName":courseName,
        "classTrem":classTrem,
        "courseSerial":courseSerial
        },
      success: function(result){
        console.log(111111);
    console.log("修改成功");
      },
      error:function(result){
        console.log("sb");
      }
     })
  }
  
  
  
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      deleteCoures(data.id);
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
/*     table.on('edit(demo)',function(obj){
      var value = obj.value,
      field = obj.field;
      layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
    }); */
    //同步更新缓存对应的值
    obj.update({
      username: '123'
      ,title: 'xxx'
    });
  }
  });

  function deleteCoures(courseID){
    $.ajax({
      url:"/admin/course/delete/"+courseID,
      type:"delete",
      dataType:"json",
      data:{},
      success: function(data){
        console.log("删除成功");
    }
    })
  }

  var active = {
    setTop: function(){
      var that = this; 
      //多窗口模式，层叠置顶
      layer.open({
        type: 2 ,//此处以iframe举例
        title: '新增课程',
        area: [' 600px','400px'],
        shade: 0,
        maxmin: true,
        offset: 'auto',
        content: 'addCourse.html',
        btn: ['关闭'], //只是为了演示,
        yes: function(){
          layer.closeAll();
        },
        zIndex: layer.zIndex, //重点1
        success: function(layero){
          layer.setTop(layero); //重点2
        },
        cancel: function(index, layero){ //关闭窗户回调
          if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
            layer.close(index)
          }
         return false;  
        }
      });
    },
      search: function(){
      var keyWord = $("#course_search").val();
      keyWord="%"+keyWord+"%";
      table.reload('coursesData',{
        url:'/admin/course/byKeyWord',
        where:{
          keyWord:keyWord
        },
        page:{
          curr:1 //重新从第 1 页开始
        }
      });
    }
  };

  $('.layui-btn').on('click', function(){
    var othis = $(this), method = othis.data('method');
    active[method] ? active[method].call(this, othis) : '';
  });

/*  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });*/

  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#uploadFile', //绑定元素
    url: '/upload/', //上传接口
    accept: 'file',
/*     exts:'xls|xlsx'， //普通文件 */
    done: function(res){
      //上传完毕回调
    },
    error: function(){
      //请求异常回调
    }
  }); 

  });
</script>

</body>
</html>